<template>
	<view class="salfOrder">
		<custom-swiper ref="customSwi" :list="gltabs" :bold="true" :headIconShow="true">
			<template slot="l-icon">
				<view @click="toggleTab" class="xzsj f-y-c bf">
					<view class="f-c-c">
						<text class="">{{ dateDef.startTime.substring(5, 10) }}</text>
						<text class="">{{ dateDef.endTime.substring(5, 10) }}</text>
						<!-- <text class="f24" :style="{color:'#FFE362'}">{{xzdate.rq}}</text> -->
					</view>
					<text class="iconfont icondown wei f22 c0 ml5"></text>
				</view>
			</template>
			<template v-for="(item, index) of gltabs" :slot="'swiper-item-' + (index + 1)">
				<order-list :ref="'orderList' + (index + 1)" :state="index" type="2" :url-api="urlApi" :key="index" :data="dateDef"></order-list>
			</template>
		</custom-swiper>
		<u-calendar
			v-model="showrl"
			mode="range"
			:btnstyle="{ background: '#FE9367' }"
			range-color="#FE9367"
			range-bg-color="rgba(253,215,75,0.2)"
			active-bg-color="#FE9367"
			@change="change"
		></u-calendar>
	</view>
</template>

<script>
import OrderList from '@/components/template/order/order-list.vue';
import CustomSwiper from '@/components/custom-tabs-page-linkge/tab-page-linkage.vue';
import navTab from '@/components/common/functionCmp/nav-tab.vue';
export default {
	components: {
		OrderList,
		CustomSwiper,
		navTab
	},
	data() {
		return {
			urlApi:this.api.wmddlb,
			dateDef: {
				orderType: 3,
				startTime: new Date().format('yyyy-MM-dd'),
				endTime: new Date().format('yyyy-MM-dd')
			},
			showrl: false,
			gltabs: [
				{
					name: '全部'
				},
				{
					name: '进行中'
				},
				{
					name: '已完成'
				},
				{
					name: '已取消/退单'
				}
			]
		};
	},
	onLoad() {
		setTimeout(() => {
			this.$refs.customSwi.change(1);
		}, 500);
	},
	methods: {
		toggleTab() {
			this.showrl = true;
		},
		change(e) {
			this.dateDef.startTime = e.startDate;
			this.dateDef.endTime = e.endDate;
			uni.$emit('refresh');
		}
	}
};
</script>

<style lang="scss" scoped>
.salfOrder {
	height: 100vh;
	//#ifdef H5
	height: 100%;
	//#endif

	.xzsj {
		min-width: 130rpx;
		justify-content: center;
		position: relative;

		&::before {
			content: '';
			display: block;
			position: absolute;
			right: 0rpx;
			height: 50rpx;
			width: 6rpx;
			border-radius: 50rpx;
			box-shadow: 2rpx 0 8rpx 0 rgba(0, 0, 0, 0.2);
			z-index: 1;
		}
		&::after {
			content: '';
			display: block;
			position: absolute;
			right: 0rpx;
			height: 80rpx;
			width: 12rpx;
			background-color: #ffffff;
			z-index: 4;
		}
	}
}
</style>
